<!--
* description: 车系名称/车型名称/选装包/车身颜色/内饰颜色/门店名称---门店销售计划制定时机设置
* author:duanhy
* createdDate: 2020-12-22
-->
<template>
  <div class="app-container app-container-table">
    <el-dialog
      v-dialogDrag
      style="margin:15px"
      :visible="popupsVisible"
      :title="titleName"
      center
      width="70%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
      <div>
        <!-- 表单组件 -->
        <one-table-template
          ref="multipleTable"
          :dynamic-buttons="tableButtons"
          :dynamic-components="tableComponents"
          :dynamic-api-config="apiConfig"
          :dynamic-table-cols="tableCols"
          :dynamic-form-fields="formField"
          :dynamic-is-show-select="selectFalse"
          :dynamic-is-show-more-btn="true"
          :dynamic-table-defult-height="300"
          :callback-obj="callbackObj"
          :refresh-table-key="refreshTableKey"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import dialogHeader from '@/components/dialogHeader'
import Vue from 'vue'
import api from '@/api/apiVeData'
export default {
  components: {
    OneTableTemplate,
    dialogHeader
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, 'supplierMessage-edit'], () => {
      next()
    })
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    },
    titleName: {
      type: String,
      default: ''
    },
    lable: {
      type: String,
      default: ''
    },
    isRequire: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      door: [],
      refreshTableKey: '0',
      selectFalse: false,
      selectdata: {
        type: Object,
        default: () => {}
      },
      // 网格查询API配置对象
      apiConfig: {},
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: '查询',
          name: 'search', // 按钮图标样式
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          clickEvent: () => this.reset(),
          text: '重置',
          name: 'reset',
          position: 'right' // 重置
        },
        {
          compKey: 'btnKey3',
          type: '',
          size: '',
          clickEvent: () => this.requireSave(),
          text: '确认',
          name: '', // 按钮图标样式
          position: 'left',
          fuzzySearch: true,
          isShow: false
        },
        {
          compKey: 'btnKey4',
          type: '',
          size: 'small',
          clickEvent: () => this.closeEdit(),
          text: '取消',
          name: '',
          position: 'left', // 取消
          isShow: false
        }
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            // 显示组件
            {
              compKey: 'compKey1',
              labelName: this.lable + '编码：',
              codeField: 'carSeriesCode',
              isMul: false,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey2',
              labelName: this.lable + '名称：',
              codeField: 'carSeriesCn',
              isMul: false,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            }
          ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'optionalPagCode',
              label: this.lable + '编码',
              hidden: false
            },
            {
              prop: 'optionalPagName',
              label: this.lable + '名称',
              hidden: false
            },
            {
              prop: 'optionalPrice',
              label: '英文名称',
              hidden: false
            },
            {
              prop: 'isEnableCode',
              label: '排列顺序',
              hidden: false
            }
          ],
      formField: {},
      // 是否使用刷新Key的方式刷新弹窗
      resetDialogKey: false,
      // 单表格模版页面组件回调事件
      callbackObj: {
        // 表格双击事件
        onRowDbClick: (row, column, event) => {
          if (this.selectFalse === false) {
            this.$emit('save', row)
            this.closeEdit()
          }
        },
        onCheckSelectChange: (selection) => {
          this.door = selection
        }
      }
    }
  },
  created() {},
  mounted() {
    if (this.titleName === '车系名称选择') {
      this.apiConfig = api.listOfCarSeries
      this.tableCols[0].label = '车系编码'
      this.tableCols[1].label = '车系名称'
      this.tableCols[2].label = '英文名称'
      this.tableCols[3].label = '排列顺序'
      this.tableCols[0].prop = 'carSeriesCode'
      this.tableCols[1].prop = 'carSeriesCn'
      this.tableCols[2].prop = 'carSeriesEn'
      this.tableCols[3].prop = 'orderNo'
      this.tableComponents[0].codeField = 'carSeriesCode'
      this.tableComponents[1].codeField = 'carSeriesCn'
      this.formField = {
        carSeriesCode: '',
        carSeriesCn: ''
      }
    }
    if (this.titleName === '车型名称选择') {
      this.apiConfig = api.listOfCarModel
      this.tableCols[0].label = '车系编码'
      this.tableCols[1].label = '车系名称'
      this.tableCols[2].label = '车型编码'
      this.tableCols[3].label = '车型名称'
      this.tableCols[0].prop = 'carSeriesCode'
      this.tableCols[1].prop = 'carSeriesCn'
      this.tableCols[2].prop = 'carConfigCode'
      this.tableCols[3].prop = 'carConfigCn'
      this.tableComponents[0].codeField = 'carConfigCode'
      this.tableComponents[1].codeField = 'carConfigCn'
      this.formField = {
        carConfigCode: '',
        carConfigCn: ''
      }
    }
    if (this.titleName === '选装包选择') {
      this.apiConfig = api.listOfPackage
      this.tableCols[0].label = '选装包编码'
      this.tableCols[1].label = '选装包名称'
      this.tableCols[2].label = '价格'
      this.tableCols[3].hidden = true
      this.tableCols[0].prop = 'optionalPagCode'
      this.tableCols[1].prop = 'optionalPagName'
      this.tableCols[2].prop = 'optionalPrice'
      this.tableComponents[0].codeField = 'optionalPagCode'
      this.tableComponents[1].codeField = 'optionalPagName'
      this.formField = {
        optionalPagCode: '',
        optionalPagName: ''
      }
    }
    if (this.titleName === '车身颜色选择') {
      this.apiConfig = api.listOfCarColor
      this.tableCols[0].label = '车身颜色编码'
      this.tableCols[1].label = '车身颜色名称'
      this.tableCols[2].label = '价格'
      this.tableCols[3].hidden = true
      this.tableCols[0].prop = 'carColorCode'
      this.tableCols[1].prop = 'carColorName'
      this.tableCols[2].prop = 'carColorPrice'
      this.tableComponents[0].codeField = 'carColorCode'
      this.tableComponents[1].codeField = 'carColorName'
      this.formField = {
        carColorCode: '',
        carColorName: ''
      }
    }
    if (this.titleName === '内饰颜色选择') {
      this.apiConfig = api.listOfCarInterior
      this.tableCols[0].label = '内饰颜色编码'
      this.tableCols[1].label = '内饰颜色名称'
      this.tableCols[2].label = '价格'
      this.tableCols[3].hidden = true
      this.tableCols[0].prop = 'carIncolorCode'
      this.tableCols[1].prop = 'carIncolorName'
      this.tableCols[2].prop = 'carIncolorPrice'
      this.tableComponents[0].codeField = 'carIncolorCode'
      this.tableComponents[1].codeField = 'carIncolorName'
      this.formField = {
        carIncolorCode: '',
        carIncolorName: ''
      }
    }
    if (this.titleName === '门店名称选择') {
      if (this.isRequire) {
        this.selectFalse = true
        this.tableButtons[2].isShow = true
        this.tableButtons[3].isShow = true
      }
      this.apiConfig = api.listOfStore
      this.tableCols[0].label = '门店编码'
      this.tableCols[1].label = '门店名称'
      this.tableCols[2].hidden = true
      this.tableCols[3].hidden = true
      this.tableCols[0].prop = 'dlrCode'
      this.tableCols[1].prop = 'dlrShortName'
      this.tableComponents[0].codeField = 'dlrCode'
      this.tableComponents[1].codeField = 'dlrShortName'
      this.formField = {
        dlrCode: '',
        dlrShortName: ''
      }
    }
    setTimeout(() => {
      this.queryTable(1)
    }, 0)
  },

  methods: {
    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },
    // 必填项门店
    requireSave() {
      this.$emit('store', this.door)
      this.closeEdit()
    }
  }
}
</script>

